<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧教室控制中心 - By:dogdoog</title>
    <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #7c4dff;
            --secondary: #5e35b1;
            --accent: #ff6ec7;
            --light: #f5f7ff;
            --dark: #1a1a40;
            --success: #4caf50;
            --warning: #ff9800;
            --danger: #f44336;
            --info: #2196f3;
            --humidity-normal: #4fc3f7;
            --humidity-high: #1565c0;
            --light-normal: #ffc107;
            --light-high: #ff9800;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Quicksand', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7ff 0%, #e6e9ff 100%);
            min-height: 100vh;
            padding: 20px;
            color: var(--dark);
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            position: relative;
        }
        
        .logo {
            font-size: 2.5rem;
            font-weight: bold;
            color: var(--primary);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }
        
        .logo i {
            background: linear-gradient(135deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .subtitle {
            color: var(--secondary);
            font-size: 1.2rem;
            margin-bottom: 20px;
        }
        
        .dashboard {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }
        
        .card {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s, box-shadow 0.3s;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            position: relative;
            overflow: hidden;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
        }
        
        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            color: var(--primary);
        }
        
        .card-header i {
            font-size: 1.8rem;
            margin-right: 15px;
        }
        
        .card-header h2 {
            font-size: 1.5rem;
            font-weight: 600;
        }
        
        .sensor-data {
            display: flex;
            justify-content: space-around;
            text-align: center;
            flex-wrap: wrap;
        }
        
        .data-item {
            padding: 15px;
            min-width: 120px;
            flex: 1;
        }
        
        .data-value {
            font-size: 2.2rem;
            font-weight: bold;
            margin: 10px 0;
            transition: color 0.3s;
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: 4px;
            flex-wrap: wrap;
            min-height: 60px;
        }
        
        .data-unit {
            font-size: 1rem;
            font-weight: normal;
            opacity: 0.8;
        }
        
        .temperature-value {
            color: var(--primary);
        }
        
        .temperature-value.high {
            color: var(--danger);
        }
        
        .humidity-value {
            color: var(--humidity-normal);
        }
        
        .humidity-value.high {
            color: var(--humidity-high);
        }
        
        .light-value {
            color: var(--light-normal);
        }
        
        .light-value.high {
            color: var(--light-high);
        }
        
        .data-label {
            font-size: 1rem;
            color: var(--secondary);
            margin-top: 5px;
        }
        
        .control-panel {
            text-align: center;
        }
        
        .control-btn {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            border: none;
            padding: 16px 32px;
            font-size: 1.2rem;
            border-radius: 50px;
            cursor: pointer;
            margin: 10px;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(124, 77, 255, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 200px;
        }
        
        .control-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(124, 77, 255, 0.5);
        }
        
        .control-btn:active {
            transform: translateY(1px);
        }
        
        .control-btn.off {
            background: linear-gradient(135deg, #ff6b6b, #ff4757);
            box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
        }
        
        .control-btn.off:hover {
            box-shadow: 0 8px 20px rgba(255, 107, 107, 0.5);
        }
        
        .btn-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }
        
        .status-indicator {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 10px;
        }
        
        .status-on {
            background-color: var(--success);
            box-shadow: 0 0 10px var(--success);
        }
        
        .status-off {
            background-color: #ccc;
        }
        
        .connection-status {
            text-align: center;
            margin-top: 30px;
            color: var(--secondary);
            font-size: 1rem;
        }
        
        .device-id {
            background: rgba(124, 77, 255, 0.1);
            padding: 8px 15px;
            border-radius: 50px;
            display: inline-block;
            margin-top: 10px;
            font-weight: 600;
            color: var(--primary);
        }
        
        @media (max-width: 768px) {
            .dashboard {
                grid-template-columns: 1fr;
            }
            
            .logo {
                font-size: 2rem;
            }
            
            .data-value {
                font-size: 1.8rem;
            }
            
            .data-item {
                padding: 10px;
                min-width: 100px;
            }
            
            .sensor-data {
                flex-direction: column;
                align-items: center;
            }
        }
        
        .loading {
            color: var(--secondary);
            font-style: italic;
        }
        
        .emoji {
            font-size: 1.2rem;
            margin-left: 5px;
            align-self: center;
        }
        
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 20px;
            border-radius: 10px;
            background: white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transform: translateX(150%);
            transition: transform 0.3s;
            z-index: 1000;
            display: flex;
            align-items: center;
            gap: 10px;
            max-width: 350px;
        }
        
        .notification.show {
            transform: translateX(0);
        }
        
        .notification.warning {
            border-left: 4px solid var(--warning);
        }
        
        .notification.danger {
            border-left: 4px solid var(--danger);
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0% {
                box-shadow: 0 5px 15px rgba(244, 67, 54, 0.3);
            }
            50% {
                box-shadow: 0 5px 20px rgba(244, 67, 54, 0.6);
            }
            100% {
                box-shadow: 0 5px 15px rgba(244, 67, 54, 0.3);
            }
        }
        
        .notification-content {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .notification-icon {
            font-size: 1.5rem;
            color: var(--danger);
        }
        
        .notification-text {
            flex: 1;
        }
        
        .notification-title {
            font-weight: bold;
            margin-bottom: 4px;
        }
        
        .notification-close {
            background: none;
            border: none;
            font-size: 1.2rem;
            cursor: pointer;
            color: #999;
            transition: color 0.3s;
        }
        
        .notification-close:hover {
            color: var(--dark);
        }
        
        .temp-tag {
            position: absolute;
            top: 15px;
            right: 15px;
            background: var(--danger);
            color: white;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 6px;
            animation: blink 2s infinite;
            box-shadow: 0 3px 10px rgba(244, 67, 54, 0.4);
        }
        
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }
        
        .sensor-icon {
            font-size: 2.2rem !important;
            margin-bottom: 10px;
        }
        
        .value-container {
            display: flex;
            align-items: baseline;
            justify-content: center;
            flex-wrap: nowrap;
        }
        
        /* 新增样式：美化灯光控制部分 */
        .control-section {
            background: rgba(255, 255, 255, 0.6);
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
            border: 1px solid rgba(124, 77, 255, 0.1);
        }
        
        .control-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid rgba(124, 77, 255, 0.1);
        }
        
        .control-section-icon {
            font-size: 2.2rem;
            color: var(--warning);
            margin-right: 15px;
            background: linear-gradient(135deg, var(--warning), #ff5722);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .control-section-text {
            flex: 1;
        }
        
        .control-section-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--dark);
            margin-bottom: 5px;
        }
        
        .control-section-description {
            font-size: 0.95rem;
            color: var(--secondary);
            opacity: 0.8;
        }
        
        .status-display {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
            padding: 12px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
            border: 1px solid rgba(124, 77, 255, 0.1);
        }
        
        .status-label {
            font-size: 0.95rem;
            color: var(--secondary);
            margin-right: 10px;
        }
        
        .status-text {
            font-weight: 600;
            color: var(--dark);
            margin-left: 5px;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .control-header {
                flex-direction: column;
                text-align: center;
            }
            
            .control-section-icon {
                margin-right: 0;
                margin-bottom: 10px;
            }
            
            .status-display {
                flex-direction: column;
                gap: 8px;
            }
            
            .status-label {
                margin-right: 0;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <i class="fas fa-graduation-cap"></i>
                <span>智慧室内控制中心</span>
            </div>
            <p class="subtitle">实时监控与智能控制 · 为现代学习空间设计</p>
        </header>
        
        <div class="dashboard">
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-thermometer-half"></i>
                    <h2>环境监测</h2>
                </div>
                <div class="sensor-data">
                    <div class="data-item">
                        <i class="fas fa-temperature-high sensor-icon" style="color: var(--danger);"></i>
                        <div class="data-value temperature-value" id="temperature">
                            <span class="loading">Loading</span>
                        </div>
                        <div class="data-label">温度</div>
                    </div>
                    <div class="data-item">
                        <i class="fas fa-tint sensor-icon" style="color: var(--info);"></i>
                        <div class="data-value humidity-value" id="humidity">
                            <span class="loading">Loading</span>
                        </div>
                        <div class="data-label">湿度</div>
                    </div>
                    <div class="data-item">
                        <i class="fas fa-sun sensor-icon" style="color: var(--light-normal);"></i>
                        <div class="data-value light-value" id="light">
                            <span class="loading">Loading</span>
                        </div>
                        <div class="data-label">光照</div>
                    </div>
                </div>
            </div>
            
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-lightbulb"></i>
                    <h2>灯光控制</h2>
                </div>
                
                <!-- 美化后的灯光控制部分 -->
                <div class="control-section">
                    <div class="control-header">
                        <i class="fas fa-home control-section-icon"></i>
                        <div class="control-section-text">
                            <h3 class="control-section-title">室内主照明</h3>
                            <p class="control-section-description">控制室内主照明灯光系统</p>
                        </div>
                    </div>
                    
                    <div class="control-panel">
                        <div class="status-display">
                            <span class="status-label">当前状态:</span>
                            <span class="status-indicator status-off" id="light-status"></span>
                            <span class="status-text" id="light-state-text">离线</span>
                        </div>
                        <div class="btn-container">
                            <button class="control-btn" id="LightOn">
                                <i class="fas fa-lightbulb"></i>
                                <span>开 灯</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-bell"></i>
                    <h2>报警控制</h2>
                </div>
                <div class="control-panel">
                    <p>当前状态: <span class="status-indicator status-off" id="beep-status"></span> <span id="beep-state-text">静音</span></p>
                    <div class="btn-container">
                        <button class="control-btn" id="BeepOn">
                            <i class="fas fa-bell"></i>
                            <span>报 警</span>
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-lightbulb"></i>
                    <h2>LED控制</h2>
                </div>
                <div class="control-panel">
                    <p>当前状态: <span class="status-indicator status-off" id="led-status"></span> <span id="led-state-text">关闭</span></p>
                    <div class="btn-container">
                        <button class="control-btn" id="LEDOn">
                            <i class="fas fa-power-off"></i>
                            <span>开 启</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="connection-status">
            <p><i class="fas fa-plug"></i> MQTT连接状态: <span id="mqtt-status">连接中...</span></p>
            <div class="device-id">设备ID: <span id="device-id-display">dogdoog</span></div>
        </div>
    </div>

    <div class="notification" id="temp-notification">
        <div class="notification-content">
            <i class="fas fa-exclamation-triangle notification-icon"></i>
            <div class="notification-text">
                <div class="notification-title">温度警告</div>
                <div>当前温度: <span id="notification-temp"></span>°C，已超过安全范围！</div>
            </div>
        </div>
        <button class="notification-close" id="close-notification">
            <i class="fas fa-times"></i>
        </button>
    </div>

    <script>
        function getQueryParam(param) {
            const url = window.location.href;
            const regex = new RegExp('[?&]' + param + '=([^&#]*)');
            const results = regex.exec(url);
            if (results === null) {
                return null;
            } else {
                return decodeURIComponent(results[1]) || '';
            }
        }
        
        const deviceId = getQueryParam('did') || 'My_dogdoog'; // 默认设备ID  主题默认值
        document.getElementById('device-id-display').textContent = deviceId;
        
        const clientId = 'mqttjs_' + Math.random().toString(16).substr(2, 8);
        const host = 'ws://8.140.241.110:8083/mqtt';
        const options = {
            keepalive: 60,
            clientId: clientId,
            protocolId: 'MQTT',
            protocolVersion: 4,
            clean: true,
            reconnectPeriod: 1000,
            connectTimeout: 30 * 1000,
            will: {
                topic: 'WillMsg',
                payload: 'Connection Closed abnormally..!',
                qos: 0,
                retain: false
            },
        };

        // 连接 MQTT 服务器
        const client = mqtt.connect(host, options);
        
        // 更新连接状态
        client.on('connect', function() {
            document.getElementById('mqtt-status').textContent = '已连接';
            document.getElementById('mqtt-status').style.color = 'var(--success)';
            
            // 订阅传感器主题
            client.subscribe(deviceId + '/sensor/+', function(err) {
                if (err) {
                    console.error('订阅传感器主题失败:', err);
                }
            });

            // 订阅设备状态主题
            client.subscribe(deviceId + '/state/+', function(err) {
                if (err) {
                    console.error('订阅状态主题失败:', err);
                }
            });
        });
        
        client.on('error', function(err) {
            document.getElementById('mqtt-status').textContent = '连接错误';
            document.getElementById('mqtt-status').style.color = 'var(--danger)';
            console.error('Connection error: ', err);
        });
        
        client.on('reconnect', function() {
            document.getElementById('mqtt-status').textContent = '重新连接中...';
            document.getElementById('mqtt-status').style.color = 'var(--warning)';
        });
        
        client.on('offline', function() {
            document.getElementById('mqtt-status').textContent = '离线';
            document.getElementById('mqtt-status').style.color = 'var(--danger)';
        });

        // 接收服务器消息
        client.on('message', function(topic, message) {
            if (topic === deviceId + '/sensor/dht11') {
                const data = message.toString();
                // 温度湿度数据是以下划线分隔的字符串，例如 "25.3_60"
                const parts = data.split('_');
                if (parts.length === 2) {
                    const temp = parseFloat(parts[0]);
                    const hum = parseFloat(parts[1]);
                    
                    const tempElement = document.getElementById('temperature');
                    const humElement = document.getElementById('humidity');
                    
                    // 清除加载状态
                    tempElement.innerHTML = '';
                    humElement.innerHTML = '';
                    
                    // 创建温度显示
                    const tempContainer = document.createElement('div');
                    tempContainer.className = 'value-container';
                    
                    const tempNumber = document.createElement('span');
                    tempNumber.textContent = temp.toFixed(1);
                    tempNumber.className = 'temp-number';
                    
                    const tempUnit = document.createElement('span');
                    tempUnit.textContent = '°C';
                    tempUnit.className = 'data-unit';
                    
                    tempContainer.appendChild(tempNumber);
                    tempContainer.appendChild(tempUnit);
                    tempElement.appendChild(tempContainer);
                    
                    // 创建湿度显示
                    const humContainer = document.createElement('div');
                    humContainer.className = 'value-container';
                    
                    const humNumber = document.createElement('span');
                    humNumber.textContent = hum.toFixed(1);
                    humNumber.className = 'hum-number';
                    
                    const humUnit = document.createElement('span');
                    humUnit.textContent = '%RH';
                    humUnit.className = 'data-unit';
                    
                    humContainer.appendChild(humNumber);
                    humContainer.appendChild(humUnit);
                    humElement.appendChild(humContainer);
                    
                    // 温度高于38℃变红色
                    if (temp > 38) {
                        tempElement.classList.add('high');
                        // 显示温度警告通知
                        showNotification('danger', `温度过高！当前温度: ${temp.toFixed(1)}°C`);
                    } else {
                        tempElement.classList.remove('high');
                        // 隐藏通知
                        hideNotification();
                    }
                    
                    // 湿度高于40%RH变深蓝色
                    if (hum > 40) {
                        humElement.classList.add('high');
                    } else {
                        humElement.classList.remove('high');
                    }
                    
                    // 根据温度值添加表情
                    let tempEmoji = '';
                    if (temp > 38) tempEmoji = '🥵';
                    else if (temp > 25) tempEmoji = '😊';
                    else if (temp > 20) tempEmoji = '😐';
                    else tempEmoji = '🥶';
                    
                    const tempEmojiSpan = document.createElement('span');
                    tempEmojiSpan.className = 'emoji';
                    tempEmojiSpan.textContent = tempEmoji;
                    tempElement.appendChild(tempEmojiSpan);
                    
                    // 根据湿度值添加表情
                    let humEmoji = '';
                    if (hum > 70) humEmoji = '💦';
                    else if (hum > 40) humEmoji = '👍';
                    else humEmoji = '🏜️';
                    
                    const humEmojiSpan = document.createElement('span');
                    humEmojiSpan.className = 'emoji';
                    humEmojiSpan.textContent = humEmoji;
                    humElement.appendChild(humEmojiSpan);
                }
            }
            else if (topic === deviceId + '/sensor/light') {
                const lightValue = parseFloat(message.toString());
                const lightElement = document.getElementById('light');
                
                // 清除加载状态
                lightElement.innerHTML = '';
                
                // 创建光照显示
                const lightContainer = document.createElement('div');
                lightContainer.className = 'value-container';
                
                const lightNumber = document.createElement('span');
                lightNumber.textContent = lightValue.toFixed(0);
                lightNumber.className = 'light-number';
                
                const lightUnit = document.createElement('span');
                lightUnit.textContent = 'lux';
                lightUnit.className = 'data-unit';
                
                lightContainer.appendChild(lightNumber);
                lightContainer.appendChild(lightUnit);
                lightElement.appendChild(lightContainer);
                
                // 光照强度高于500lux变橙色
                if (lightValue > 500) {
                    lightElement.classList.add('high');
                } else {
                    lightElement.classList.remove('high');
                }
                
                // 根据光照值添加表情
                let lightEmoji = '';
                if (lightValue > 1000) lightEmoji = '😎';
                else if (lightValue > 500) lightEmoji = '☀️';
                else if (lightValue > 100) lightEmoji = '🌤️';
                else lightEmoji = '🌙';
                
                const lightEmojiSpan = document.createElement('span');
                lightEmojiSpan.className = 'emoji';
                lightEmojiSpan.textContent = lightEmoji;
                lightElement.appendChild(lightEmojiSpan);
            }
            else if(topic === deviceId + '/state/led') {
                const lightBtn = document.getElementById('LightOn');
                const lightStatus = document.getElementById('light-status');
                const lightStateText = document.getElementById('light-state-text');
                
                if(message.toString() === '1') {
                    lightBtn.innerHTML = '<i class="fas fa-lightbulb"></i><span>关 灯</span>';
                    lightBtn.classList.add('off');
                    lightStatus.className = 'status-indicator status-on';
                    lightStateText.textContent = '开启';
                } else {
                    lightBtn.innerHTML = '<i class="fas fa-lightbulb"></i><span>开 灯</span>';
                    lightBtn.classList.remove('off');
                    lightStatus.className = 'status-indicator status-off';
                    lightStateText.textContent = '关闭';
                }
            }
            else if(topic === deviceId + '/state/beep') {
                const beepBtn = document.getElementById('BeepOn');
                const beepStatus = document.getElementById('beep-status');
                const beepStateText = document.getElementById('beep-state-text');
                
                if(message.toString() === '1') {
                    beepBtn.innerHTML = '<i class="fas fa-bell-slash"></i><span>静 音</span>';
                    beepBtn.classList.add('off');
                    beepStatus.className = 'status-indicator status-on';
                    beepStateText.textContent = '报警中';
                } else {
                    beepBtn.innerHTML = '<i class="fas fa-bell"></i><span>报 警</span>';
                    beepBtn.classList.remove('off');
                    beepStatus.className = 'status-indicator status-off';
                    beepStateText.textContent = '静音';
                }                    
            }
            else if(topic === deviceId + '/state/led2') {
                const ledBtn = document.getElementById('LEDOn');
                const ledStatus = document.getElementById('led-status');
                const ledStateText = document.getElementById('led-state-text');
                
                if(message.toString() === '1') {
                    ledBtn.innerHTML = '<i class="fas fa-power-off"></i><span>关 闭</span>';
                    ledBtn.classList.add('off');
                    ledStatus.className = 'status-indicator status-on';
                    ledStateText.textContent = '开启';
                } else {
                    ledBtn.innerHTML = '<i class="fas fa-power-off"></i><span>开 启</span>';
                    ledBtn.classList.remove('off');
                    ledStatus.className = 'status-indicator status-off';
                    ledStateText.textContent = '关闭';
                }                    
            }
        });

        // 按钮事件
        document.getElementById('LightOn').addEventListener('click', function() {
            var message = 'b';  // 关灯命令
            
            if(this.querySelector('span').textContent === '开 灯') {
                message = 'a'; // 开灯命令
            }

            client.publish(deviceId + '/cmd', message);
        });

        document.getElementById('BeepOn').addEventListener('click', function() {
            var message = 'd'; // 静音命令
            if(this.querySelector('span').textContent === '报 警') {
                message = 'c'; // 报警命令
            }

            client.publish(deviceId + '/cmd', message);
        });
        
        document.getElementById('LEDOn').addEventListener('click', function() {
            var message = 'f'; // 关闭LED命令
            if(this.querySelector('span').textContent === '开 启') {
                message = 'e'; // 开启LED命令
            }

            client.publish(deviceId + '/cmd', message);
        });
        
        // 显示通知函数
        function showNotification(type, message) {
            const notification = document.getElementById('temp-notification');
            document.getElementById('notification-temp').textContent = message.split(': ')[1].replace('°C', '');
            notification.className = `notification ${type} show`;
        }
        
        // 隐藏通知函数
        function hideNotification() {
            const notification = document.getElementById('temp-notification');
            notification.classList.remove('show');
        }
        
        // 关闭通知按钮事件
        document.getElementById('close-notification').addEventListener('click', hideNotification);
        
        // 模拟数据更新（仅用于演示）
        function simulateDataUpdate() {
            const simulatedTemp = Math.random() * 15 + 25; // 25-40℃之间的随机温度
            const simulatedHum = Math.random() * 40 + 30; // 30-70%RH之间的随机湿度
            const simulatedLight = Math.random() * 1000 + 50; // 50-1050lux之间的随机光照
            
            const simulatedDHTMessage = `${simulatedTemp.toFixed(1)}_${simulatedHum.toFixed(1)}`;
            const simulatedLightMessage = simulatedLight.toFixed(0);
            
            // 模拟接收MQTT消息
            client.on('message')('dogdoog/sensor/dht11', simulatedDHTMessage);
            client.on('message')('dogdoog/sensor/light', simulatedLightMessage);
        }
        
        // 每5秒更新一次模拟数据（仅用于演示）
        // setInterval(simulateDataUpdate, 5000);
    </script>
</body>
</html>